<template>
    <div>
        <el-card style="width: 700px;margin: auto;">
            <div slot="header" class="clearfix">
                <span>新建小区</span>
            </div>
            <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="80px">
                <el-form-item label="小区名称" prop="communityName">
                    <el-input v-model="ruleForm.communityName"></el-input>
                </el-form-item>
                <el-form-item label="小区编号" prop="communityNumber">
                    <el-input v-model="ruleForm.communityNumber"></el-input>
                </el-form-item>
                <el-form-item label="所属区域" prop="area">
                    <el-select v-model="ruleForm.area" placeholder="请选择地区">
                        <el-option label="昌平区" value="昌平区"></el-option>
                        <el-option label="海淀区" value="海淀区"></el-option>
                        <el-option label="朝阳区" value="朝阳区"></el-option>
                        <el-option label="房山区" value="房山区"></el-option>
                        <el-option label="丰台区" value="丰台区"></el-option>
                        <el-option label="石景山区" value="石景山区"></el-option>
                        <el-option label="东城区" value="东城区"></el-option>
                        <el-option label="西城区" value="西城区"></el-option>
                        <el-option label="崇文区" value="崇文区"></el-option>
                        <el-option label="宣武区" value="宣武区"></el-option>
                        <el-option label="门头沟区" value="门头沟区"></el-option>
                        <el-option label="通州区" value="通州区"></el-option>
                        <el-option label="顺义区" value="顺义区"></el-option>
                        <el-option label="大兴区" value="大兴区"></el-option>
                        <el-option label="怀柔区" value="怀柔区"></el-option>
                        <el-option label="平谷区" value="平谷区"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
                <div style="margin: auto;">
                    <el-form-item label="建成日期" prop="builtTime">
                        <!-- <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.builtTime"
                                style="width: 585px;">
                            </el-date-picker>
                        </el-col> -->
                        <el-col :span="11">
                            <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.builtTime"
                                value-format="yyyy-MM-dd HH:mm:ss" style="width: 585px;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                </div>
                <el-form-item label="房屋用途" prop="houseUse">
                    <el-select v-model="ruleForm.houseUse" placeholder="请选择">
                        <el-option label="普通住宅" value="1"></el-option>
                        <el-option label="商业用地" value="2"></el-option>
                        <el-option label="商住两用" value="3"></el-option>
                        <el-option label="其他" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小区面积" prop="plotArea">
                    <el-input-number v-model="ruleForm.plotArea" controls-position="right" :min="1" :max="99999"
                        style="width: 500px;">
                    </el-input-number> 平方米
                </el-form-item>
                <el-form-item label="楼栋数量" prop="buildingSum">
                    <el-input-number v-model="ruleForm.buildingSum" controls-position="right" :min="1" :max="999"
                        style="width: 500px;">
                    </el-input-number> 栋
                </el-form-item>
                <el-form-item label="车位数量" prop="temporaryCarSum">
                    <el-input-number v-model="ruleForm.temporaryCarSum" controls-position="right" :min="0" :max="999"
                        style="width: 500px;">
                    </el-input-number> 个
                </el-form-item>
                <!-- <el-form-item label="小区图片">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item> -->
                <el-form-item label="小区图片">
                    <el-upload action="http://localhost:80/housingestate/community/upload" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="checkCard">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!-- <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog> -->
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addCommunity('ruleForm')">提交</el-button>
                    <el-button @click="$router.push('/community1')">返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: "",
            ruleForm: {
                communityName: "",
                communityNumber: "",
                area: "",
                address: "",
                builtTime: "",
                houseUse: "",
                plotArea: "",
                buildingSum: "",
                temporaryCarSum: "",
                fileUrl: "",
            },
            rules: {
                communityName: [
                    { required: true, message: '请输入小区名称', trigger: 'blur' },
                ],
                communityNumber: [
                    { required: true, message: '请输入小区编号', trigger: 'blur' }
                ],
                area: [
                    { required: true, message: '请选择区域', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ],
                builtTime: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'blur' }
                ],
                houseUse: [
                    { required: true, message: '请选择用途', trigger: 'blur' }
                ],
                plotArea: [
                    { required: true, message: '请输入小区面积', trigger: 'blur' }
                ],
                buildingSum: [
                    { required: true, message: '请输入楼栋数量', trigger: 'blur' }
                ],
                temporaryCarSum: [
                    { required: true, message: '请输入车辆数量', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        qqq() {
            alert("qqq")
        },

        addCommunity() {
            this.$refs.ruleForm.validate((valid) => {
                var date = new Date(this.ruleForm.builtTime);
                var time3 = Date.parse(date);
                this.$axios
                    .post("housingestate/community/addCommunity", {
                        communityName: this.ruleForm.communityName,
                        communityNumber: this.ruleForm.communityNumber,
                        area: this.ruleForm.area,
                        address: this.ruleForm.address,
                        builtTime: time3,
                        houseUse: this.ruleForm.houseUse,
                        plotArea: this.ruleForm.plotArea,
                        buildingSum: this.ruleForm.buildingSum,
                        temporaryCarSum: this.ruleForm.temporaryCarSum,
                        fileUrl: this.ruleForm.fileUrl,
                    })
                    .then(res => {
                        if (res.data.code == 20000) {
                            this.$router.push('/community1')
                        } else {
                            this.error = res.data.data.error
                            this.$message({
                                type: 'error',
                                message: this.error
                            })
                        }
                    });
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
            console.log(file)
        }, handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        checkCard(file) {
            this.ruleForm.fileUrl = file
            console.log(file)
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>